import React, {useState, useEffect} from'react';
import { Steps, Space, NavBar } from 'antd-mobile'
import { useNavigate } from'react-router-dom';
import styles from '../../css/Wyx/dengji.module.css' 
import axios from 'axios'


// 外出登记页面
function DengJi() {    

    const navigate = useNavigate();
    let [accessToken, setaccessToken] = useState(JSON.parse(localStorage.getItem('accessToken')) || "")
    const [data, setData] = useState([])
    const getList = () => {
        axios.get(`http://127.0.0.1:3000/xin/dengji`).then(res=>{
            if(res.data.code===200){
                setData(res.data.result)
            }
        },
        {
            headers: {
              'Authorization': accessToken
            }
        }
        )
    }
    useEffect(()=>{
        getList()
    },[])

    // 点击返回外出页面 
    const back = () => {
        navigate('/waichu')
    }
    useEffect(() => {

    }, [])
    
    return (
        <div className={styles.dengji}>
            <NavBar onBack={back} style={{backgroundColor: "#6a7d8f", color: "white", height: "6rem"}}>外出登记</NavBar>
            <div>
                {
                    data.map((item, index) => {
                        return (
                            <div key={index} className={styles.dengji_item}>
                                <div >
                                    <p className={styles.dengji_p}>
                                        <span>客户姓名</span>
                                        <span>{item.name}</span>
                                    </p>
                                    <div className={styles.dengji_address}>
                                        <div className={styles.D_left}>
                                            <span style={{lineHeight: "3rem"}}>{item.address}</span>
                                            <span style={{fontSize: '1.2rem', color: '#a1a1a1', lineHeight: "3rem"}}>{item.xinxi}</span> 
                                        </div>
                                        <img src="/imgs/1.jpg" alt="error" style={{width: "10rem"}} />
                                    </div>
                                    <p className={styles.dengji_p} style={{margin: "1rem 0"}}>
                                        <span>预计到达时间</span>
                                        <span>{item.time}</span>
                                    </p>
                                </div>
                            </div>
                        )
                    })

                }

            </div>
            
        </div>
    )
}

export default DengJi;